<template>
  <div class="top_banner">
    <div class="warn-box">
      <svg-icon style="margin-right:17px" icon-class="warn" :size="20" />
      <p><span>图片要求！</span><br />图片尺寸请采用702*160px</p>
    </div>
    <banner-form v-for="(item, index) in bannerList" style="margin-top:10px" :key="index" :item-index="index"
      :show-tool="true" :form-data="item" type="topBanner" @upSortItem="upSortItem(index)"
      @downSortItem="downSortItem(index)" @deleteItem="deleteItem(index)">
    </banner-form>
    <el-divider v-if="bannerList.length > 0 && bannerList.length < maxLength"></el-divider>
    <div v-if="bannerList.length < maxLength" class="add-div" @click="addItem">
      <i class="el-icon-plus"></i>添加图片({{ bannerList.length }}/{{ maxLength }})
    </div>
  </div>
</template>

<script>
import bannerForm from "../components/bannerForm";
export default {
  components: { bannerForm },
  name: "capsuleBanner",
  data() {
    return {
      maxLength: 10,
      bannerList: []
    }
  },
  methods: {
    // 升序
    upSortItem(index) {
      if (index === 0) {
        return;
      }
      let item = this.bannerList[index];
      this.$set(this.bannerList, index, this.bannerList[index - 1]);
      this.$set(this.bannerList, index - 1, item);
    },
    // 降序
    downSortItem(index) {
      if (index === this.bannerList.length - 1) {
        return;
      }
      let item = this.bannerList[index];
      this.$set(this.bannerList, index, this.bannerList[index + 1]);
      this.$set(this.bannerList, index + 1, item);
    },
    // 删除推荐位
    deleteItem(index) {
      this.bannerList.splice(index, 1);
    },
    addItem() {
      this.bannerList.push({
        img: '',
        jumpType: '',
        jumpUrl: '',
        isShow: true,
        goods: {}
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
